<%@ page import="com.ushier.shop.drugstore.bean.Drug" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>药品售卖网</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
      .el-row {
        margin-bottom: 20px;
      }
      .el-col {
        border-radius: 4px;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    </style>

  </head>
  <body>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">

    <el-container>
      <%--<el-header>--%>
        <%--<el-row :gutter="20">--%>
          <%--<el-col :span="5"><div class="grid-content bg-purple">药品网</div></el-col>--%>
          <%--<el-col :span="13"><div class="grid-content bg-purple"></div></el-col>--%>
          <%--<el-col :span="2">--%>
            <%--<div class="grid-content bg-purple" v-if="!isLogin">--%>
              <%--<el-button @click="onLogin">登录</el-button>--%>
            <%--</div>--%>
            <%--<div class="grid-content bg-purple" v-else>--%>
              <%--<el-button @click="onCar">购物车</el-button>--%>
            <%--</div>--%>
          <%--</el-col>--%>
        <%--</el-row>--%>
      <%--</el-header>--%>
      <el-main>


        <div class="container">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Best</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li class="active">
                      <a href="#">药品网</a>
                    </li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                    <li>
                      <a v-if="!isLogin" href = '#' @click="onLogin">登录</a>
                      <a v-else href = '#' @click="onCar">购物车</a>
                    </li>
                  </ul>
                </div>

              </nav>
            </div>
          </div>
        </div>



        <div class="container">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <div class="row">

                <div class="col-md-4" v-for="item in appleList">
                  <div class="thumbnail">
                    <img width="300" height="300" :src="item.pic" />
                    <div class="caption">
                      <h3>
                        {{item.name}}
                      </h3>
                      <p>
                        {{item.desc}}
                      </p>
                      <p>
                        <a class="btn btn-primary" @click="addCar(item.id)" href="#">加入购物车</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


      </el-main>
      <el-footer></el-footer>
    </el-container>



    <el-dialog title="购物车" :visible.sync="dialogTableVisible">
      <el-table :data="carList">
        <el-table-column property="id" label="ID" width="80"></el-table-column>
        <el-table-column property="name" label="商品名" width="150"></el-table-column>
        <el-table-column property="price" label="单价" width="80"></el-table-column>
        <el-table-column property="count" label="个数" width="80"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="doBuy">下单</el-button>
      </div>

    </el-dialog>


    <!-- Form -->
    <el-dialog title="购买数量" :visible.sync="dialogFormVisible">

      <template>
        <el-input-number v-model="count" :min="1" :max="10" label="描述文字"></el-input-number>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddCar">确 定</el-button>
      </div>
    </el-dialog>

  </div>

  <script type="text/javascript">
      var vm = new Vue({
          el: '#app',
          data: {
              isLogin: false,
              appleList: null,
              carList: [],
              count: 0,
              dialogTableVisible: false,
              dialogFormVisible: false,
              buyId: 0
          },
          methods: {
              initData: function(){
                  var self = this;

                  <%
                    Integer uid = (Integer) request.getSession().getAttribute("uid");
                    boolean isLogin = null != uid;
                  %>

                  this.isLogin = <%=isLogin%>;

                  $.ajax({
                      url: '/manage/drug?action=list',
                      type: 'GET',
                      dataType: 'JSON',
                      async: false,
                      success: function(data){
                          if(data.status == 0){
                              self.appleList = data.data;
                          }
                      },
                      error: function(e){
                          console.log(e);
                      }
                  });
              },
              onLogin: function(){
                  location.href = '/user_login.jsp';
              },
              addCar: function(id){

                  this.count = 0;
                  this.dialogFormVisible = true;
                  this.buyId = id;

              },
              doAddCar: function(){
                  var self = this;
                  this.dialogFormVisible = false;
                  $.ajax({
                      url: '/user/shopping/car?action=add&id=' +self.buyId +'&count=' + self.count,
                      type: 'GET',
                      dataType: 'JSON',
                      success: function(data){
                          console.log(data);
                          if(data.status == 0){
                              self.$notify.success({
                                  title: '成功',
                                  message: '已添加至购物车'
                              });
                          }else{
                              self.$notify.error({
                                  title: '提示',
                                  message: data.message
                              });
                          }
                      }
                  })
              },
              onCar: function(){

                  var self = this;
                  this.carList = [];


                  $.ajax({
                      url: '/user/shopping/car?action=list',
                      type: 'GET',
                      dataType: 'JSON',
                      success: function(data){
                          console.log(data);
                          if(data.status == 0){

                              var list = data.data;
                              for(var i=0; i<list.length; i++){
                                  var obj = list[i];
                                  var item = {
                                      "id": obj.id,
                                      "name": obj.name,
                                      "price": obj.price,
                                      "count": obj.count
                                  }
                                  self.carList.push(item);
                              }

                          }else{
                              self.$notify.error({
                                  title: '提示',
                                  message: data.message
                              });
                          }
                      }
                  })
                  self.dialogTableVisible = true;

              },
              doBuy: function(){

                  var self = this;

                  $.ajax({
                      url: '/manage/order?action=add',
                      type: 'POST',
                      dataType: 'JSON',
                      success: function(data){
                          console.log(data);
                          if(data.status == 0){
                              self.$notify.success({
                                  title: '成功',
                                  message: '下单成功！'
                              });
                              self.dialogTableVisible = false;
                          }

                      }
                  })
              }
          },
          mounted: function(){
              this.initData();
          }
      });
  </script>
  </body>
</html>
